<template>
  <div>
      <n-page-header class="header" title="基础详情页">
        <template #header>
          <n-breadcrumb class="breadcrumb">
            <n-breadcrumb-item>商品管理</n-breadcrumb-item>
            <n-breadcrumb-item>基础详情页</n-breadcrumb-item>
          </n-breadcrumb>
        </template>
      </n-page-header>

      <main>
        <n-card class="infoCard">
          <h2>退款申请</h2>
          <n-descriptions label-placement="left">
            <n-descriptions-item label="取货单号: "
              >1000000000</n-descriptions-item
            >
            <n-descriptions-item label="状态: ">已取货</n-descriptions-item>
            <n-descriptions-item label="销售单号: "
              >1234123421</n-descriptions-item
            >
            <n-descriptions-item label="子订单: "
              >3214321432</n-descriptions-item
            >
          </n-descriptions>
        </n-card>
        <n-card class="infoCard">
          <h2>用户信息</h2>
          <n-descriptions label-placement="left">
            <n-descriptions-item
              label="用户姓名: "
              content-style="width: 140px;"
              >付小小</n-descriptions-item
            >
            <n-descriptions-item label="联系电话: "
              >18100000000</n-descriptions-item
            >
            <n-descriptions-item label="常用快递: "
              >菜鸟存储</n-descriptions-item
            >
            <n-descriptions-item label="取货地址: "
              >浙江省杭州市西湖区万塘路18号</n-descriptions-item
            >
            <n-descriptions-item label="备注: ">无</n-descriptions-item>
          </n-descriptions>
        </n-card>

        <n-card class="tableCard">
          <h2>退货进度</h2>
          <n-table :bordered="false" :single-line="false">
            <thead>
              <tr>
                <th>时间</th>
                <th>当前进度</th>
                <th>状态</th>
                <th>操作员ID</th>
                <th>耗时</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2017-10-01 14:10</td>
                <td>联系客户</td>
                <td>进行中</td>
                <td>取货员 ID1234</td>
                <td>5mins</td>
              </tr>
              <tr>
                <td>2017-10-01 14:10</td>
                <td>联系客户</td>
                <td>进行中</td>
                <td>取货员 ID1234</td>
                <td>5mins</td>
              </tr>
              <tr>
                <td>2017-10-01 14:10</td>
                <td>联系客户</td>
                <td>进行中</td>
                <td>取货员 ID1234</td>
                <td>5mins</td>
              </tr>
              <tr>
                <td>2017-10-01 14:10</td>
                <td>联系客户</td>
                <td>进行中</td>
                <td>取货员 ID1234</td>
                <td>5mins</td>
              </tr>
              <tr>
                <td>2017-10-01 14:10</td>
                <td>联系客户</td>
                <td>进行中</td>
                <td>取货员 ID1234</td>
                <td>5mins</td>
              </tr>
            </tbody>
          </n-table>
        </n-card>
        <n-card class="tableCard">
          <h2>退货商品</h2>
          <n-data-table :columns="columns" :data="dataSource"> </n-data-table>
        </n-card>
      </main>
  </div>
</template>
<script lang="ts">
// Naive
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NCard,
  NDescriptions,
  NDescriptionsItem,
  NTable,
  NPageHeader,
  NDataTable,

} from "naive-ui";

const columns = [
  {
    title: "商品编号",
    key: "goodsNo",
  },
  {
    title: "商品名称",
    key: "name",
  },
  {
    title: "商品条码",
    key: "barcode",
  },
  {
    title: "单价",
    key: "price",
    render(row: object) {
      let price = row.price.toFixed(2);
      return price;
    },
  },
  {
    title: "数量（件）",
    key: "amount",
  },
  {
    title: "金额",
    key: "total",
  },
];

const dataSource = [
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
  {
    goodsNo: "1234561",
    name: "矿泉水 550ml",
    barcode: "12421432143214321",
    price: 2,
    amount: 1,
    total: 2,
  },
];

export default {
  components: {
    NBreadcrumb,
    NBreadcrumbItem,
    NCard,
    NDescriptions,
    NDescriptionsItem,
    NTable,
    NPageHeader,
    NDataTable,
  },
  setup() {
    return {
      columns,
      dataSource,
    };
  },
};
</script>
<style>
/* Header */
.header {
  margin-top: 2px;
  padding: 20px;
  background-color: #fff;
}
.header h2 {
  margin: 5px 0;
  font-size: 18px;
}
.breadcrumb {
  padding: 0;
}
.breadcrumb .current-b a {
  color: black;
  text-decoration: none;
  font-size: 10px;
}
.breadcrumb .current-b a:hover,
.breadcrumb .default-b a:hover {
  color: #18a058;
}
.breadcrumb .default-b a {
  color: #949494;
  text-decoration: none;
  font-size: 10px;
}

/* Main */
main {
  padding: 44px;
}
.infoCard h2 {
  font-size: 18px;
}
.tableCard h2 {
  font-size: 18px;
  font-weight: 400;
}
.infoCard,
.tableCard {
  overflow: hidden;
}
.infoCard table td {
  width: 250px;
}
</style>
